<template>
  <h3>watch函数的演示 (打开调试器查看日志消息)</h3>

  <hr>
  <button @click="city += '*'">修改城市</button>
  <span>城市: {{city}}</span>

  <hr>
  <button @click="sum++">修改总和</button>
  <span>和为: {{sum}}</span>
  <br>
  <button @click="msg += '@'">修改消息</button>
  <span>消息: {{msg}}</span>
  <br>

  <hr>
  <div>员工信息:</div>
  <div class="single">姓名: {{staff.name}}</div>
  <div class="single">年龄: {{staff.age}}</div>
  <div class="single">爱好: {{staff.hobby}}</div>
  <div class="single">薪水: {{staff.job.job1.salary}}K</div>

  <button @click="staff.name += '~'">修改姓名</button>
  <button @click="staff.age++">修改年龄</button>
  <button @click="staff.hobby[1] += '%'">修改爱好</button>
  <button @click="staff.job.job1.salary++">涨薪</button>

  <hr>
  <div>个人信息 (监视reactive定义的响应式数据中部分数据):</div>
  <div class="single">姓名: {{person.name}}</div>
  <div class="single">年龄: {{person.age}}</div>
  <div class="single">爱好: {{person.hobby}}</div>
  <div class="single">薪水: {{person.job.job1.salary}}K</div>

  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.hobby[1] += '%'">修改爱好</button>
  <button @click="person.job.job1.salary++">涨薪</button>

  <hr>
  <p>
    注意:<br>
    1. 与vue2中的watch配置功能一致.<br>
    2. 在直接监视reactive定义的响应式数据时有两个问题:<br>
    &nbsp;&nbsp;1). 无法正确获取oldValue.<br>
    &nbsp;&nbsp;2). 强制开启了深度监视,即deep配置无效.<br>
    3. 监视reactive定义的响应式数据中的某些属性时,对象属性的deep配置有效,但对象属性的oldValue仍无效;不过对基本数据类型的属性而言,oldValue则有效.<br>
  </p>
</template>

<script>
import { ref, reactive, watch } from 'vue'

export default {
  setup() {
    let city = ref('Shanghai')
    //监视一个ref函数定义的响应式数据
    watch(city, (newValue, oldValue) => {
      console.log('修改了city', newValue, oldValue)
    })

    let sum = ref(0)
    let msg = ref('vue3学习')
    //监视多个ref函数定义的响应式数据
    watch([sum, msg], ([newSum, newMsg], [oldSum, oldMsg]) => {
      console.log('修改了sum或msg - new:', newSum, newMsg, 'old:', oldSum, oldMsg)
    }, {immediate: true})

    let staff = reactive({
      name: '南宫无人',
      age: 20,
      job: {
        job1: {
          salary: 10
        }
      },
      hobby: ['Football', 'Learn']
    })
    //监视reactive函数定义的响应式数据
    //  -- 无法正确获取oldValue
    //  -- 强制开启了深度监视,即deep配置无效
    watch(staff, (newValue, oldValue) => {
      console.log('修改了staff -')
      console.log('new:', newValue.name, newValue.age, newValue.hobby.toString(), newValue.job.job1.salary)
      if (oldValue) {
        console.log('old:', oldValue.name, oldValue.age, oldValue.hobby.toString(), oldValue.job.job1.salary)
      }
    }, {immediate: true, deep: false}) //此处deep无效

    let person = reactive({
      name: '张三',
      age: 33,
      job: {
        job1: {
          salary: 22
        }
      },
      hobby: ['玩游戏', '看书', '听音乐']
    })
    //监视reactive函数定义的响应式数据中的某些属性
    //  -- 对不是对象的属性可以正确获取oldValue,但对象仍不能获取oldValue
    //  -- 深度监视deep配置有效
    watch( [()=> person.name, ()=> person.job], (newValue, oldValue) => {
      console.log('修改了person.name或job -')
      console.log('new:', newValue[0], newValue[1].job1.salary)
      if (oldValue && oldValue.length) {
        console.log('old:', oldValue[0], oldValue[1].job1.salary)
      }
    }, {immediate: true, deep: true}) //deep有效
    
    return { city, sum, msg, staff, person }
  },
}
</script>

<style scoped>

h3 {
  text-align: center;
}

.single {
  margin-top: 5px;
}

</style>